<template>
  <div class="container">
    <div class="app-container">
      <el-button class="btn-add" size="mini" type="primary" @click="add(0 , 1)">添加权限</el-button>
      <el-table default-expand-all :data="list" row-key="id">
        <el-table-column prop="name" label="名称" />
        <el-table-column prop="code" label="标识" />
        <el-table-column prop="description" label="描述" />
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button v-if="row.type === 1" size="mini" type="text" @click="add(row.id , 2)">添加</el-button>
            <el-button size="mini" type="text" @click="edit(row.id)">编辑</el-button>
            <el-button size="mini" type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <inport-dialog ref="edit" :dialog-text="dialogText" :show-dialog.sync="showDialog" :dialog-type="dialogType" :dialog-pid="dialogPid" @update="loadPermission" />
  </div>
</template>
<script>
import { delPermission, getPermissionList } from '@/api/permission'
import { arr2tree } from '@/utils'
import InportDialog from './components/inport-dialog.vue'

export default {
  name: 'Permission',
  components: {
    InportDialog
  },
  data() {
    return {
      dialogText: '',
      showDialog: false,
      list: [],
      dialogPid: '',
      dialogType: ''
    }
  },
  created() {
    this.loadPermission()
  },
  methods: {

    async loadPermission() {
      const res = await getPermissionList()
      this.list = arr2tree(res.data, 0)
    },
    // 添加权限
    add(pid, type) {
      console.log(pid, type)
      this.showDialog = true
      this.dialogPid = pid
      this.dialogType = type
      this.dialogText = '添加权限'
      this.$refs.edit.formDel()
    },
    // 编辑
    edit(id) {
      // console.log(id)
      this.showDialog = true
      this.dialogPid = id
      this.dialogText = '编辑权限'
      this.$nextTick(() => {
        this.$refs.edit.upPermissionDetail()
      })
    },
    // 删除权限
    del(id) {
      this.$confirm('确认删除？',
        { confirmButtonText: '确定',
          cancelButtonText: '取消' })
        .then(async _ => {
          await delPermission(id)
          this.loadPermission()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(_ => {})
    }

  }
}
</script>
